<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-icons/maps-icons.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<!-- Change this to standard google-map.html in bower_components folder if you are not in China-->
<link rel="import" href="google-map/google-map.html">


<polymer-element name="event-map" noscript>
  <template>
    <style>
    core-header-panel {
      height: 100%;
      width: 100%;   
    }
    p {
      margin: 3px;
    }
    #description {
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 10px;
      margin-bottom: 5px;   
    }
    google-map {
      display: block;
    }      
    core-icon {
      color: #3f51b5;
    }
    @media (max-height: 650px) {
      #description {
        display: none;
      }
    }    
    </style>
    <core-header-panel flex>
      <div id="description" class="core-header">
        <p><core-icon icon="alarm"></core-icon>活动时间：10月18日，X:00-X:00。</p>
        <p><core-icon icon="maps:place"></core-icon>活动地点：西交利物浦大学，第一、第二报告厅。</p>
        <p><core-icon icon="maps:directions-bus"></core-icon>乘车路线：XXXXXXXXXXX。</p>
      </div>

      
      <google-map id="map" fit
          latitude="31.274677"
          longitude="120.738121"
          
          zoom="16">
        <google-map-marker
            latitude="31.274677"
            longitude="120.738121"
            icon="images/icons/spotlight-poi.png">
            <p><core-icon icon="account-balance"></core-icon>主会场：西交利物浦大学中心楼</p>
            <p>XXXXXXXXX</p>
            <p>X:00-X:00</p>
        </google-map-marker>
        
        <google-map-marker
            latitude="31.275711"
            longitude="120.741219"
            icon="images/icons/spotlight-poi.png">
            <p><core-icon icon="maps:local-restaurant"></core-icon>下车地点：西交大站</p>
            <p>x:xx-xx:xx</p>
        </google-map-marker>      
      </google-map>   
    </core-header-panel>
  </template>
</polymer-element>
